```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebService架构设计与最佳实践</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .code-block {
            background: #2d2d2d;
            border-radius: 8px;
            position: relative;
        }
        .code-block pre {
            margin: 0;
            padding: 1.5rem;
            overflow-x: auto;
        }
        .code-block:before {
            content: '';
            position: absolute;
            top: 12px;
            left: 12px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ff5f56;
            box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
        }
        .highlight-box {
            border-left: 4px solid #6e8efb;
            background: rgba(110, 142, 251, 0.05);
        }
        .mermaid {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-24 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl text-center">
            <div class="flex justify-center mb-6">
                <div class="bg-white bg-opacity-20 rounded-full p-3 inline-flex">
                    <i class="fas fa-code text-2xl"></i>
                </div>
            </div>
            <h1 class="text-4xl md:text-5xl font-bold mb-6">WebService架构设计与最佳实践</h1>
            <p class="text-xl md:text-2xl opacity-90 max-w-3xl mx-auto leading-relaxed">
                打造高性能、易维护、安全的系统间通信解决方案
            </p>
            <div class="mt-12">
                <a href="#content" class="bg-white text-blue-600 hover:bg-blue-50 px-8 py-3 rounded-full font-medium inline-block transition duration-300">
                    <i class="fas fa-arrow-down mr-2"></i>探索最佳实践
                </a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main id="content" class="container mx-auto max-w-5xl px-4 py-16">
        <!-- Introduction -->
        <section class="mb-20">
            <div class="highlight-box p-6 mb-8 rounded-lg">
                <p class="text-lg leading-relaxed">
                    在现代软件开发中，<strong class="font-bold">WebService</strong>（Web 服务）是系统之间进行数据交互的关键组件。然而，随着业务规模的增长，许多开发者都会遇到 WebService <strong class="font-bold">难以维护、扩展性差、接口混乱、代码冗余</strong> 等问题。
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-100 text-blue-600 p-3 rounded-full mr-4">
                            <i class="fas fa-exclamation-triangle text-lg"></i>
                        </div>
                        <h3 class="text-xl font-semibold">常见问题</h3>
                    </div>
                    <ul class="space-y-2 text-gray-700">
                        <li class="flex items-start">
                            <i class="fas fa-times text-red-400 mt-1 mr-2"></i>
                            <span>接口设计混乱，难以维护</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times text-red-400 mt-1 mr-2"></i>
                            <span>缺乏统一规范和标准</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times text-red-400 mt-1 mr-2"></i>
                            <span>安全漏洞风险</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times text-red-400 mt-1 mr-2"></i>
                            <span>文档缺失或过时</span>
                        </li>
                    </ul>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <div class="flex items-center mb-4">
                        <div class="bg-green-100 text-green-600 p-3 rounded-full mr-4">
                            <i class="fas fa-check-circle text-lg"></i>
                        </div>
                        <h3 class="text-xl font-semibold">解决方案</h3>
                    </div>
                    <ul class="space-y-2 text-gray-700">
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-400 mt-1 mr-2"></i>
                            <span>清晰的架构分层</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-400 mt-1 mr-2"></i>
                            <span>RESTful设计规范</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-400 mt-1 mr-2"></i>
                            <span>自动化文档生成</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-400 mt-1 mr-2"></i>
                            <span>统一的异常处理</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="mermaid mb-8">
                graph TD
                    A[WebService 问题] --> B[架构设计]
                    A --> C[代码规范]
                    A --> D[文档管理]
                    A --> E[安全措施]
                    B --> B1[分层架构]
                    B --> B2[服务类型选择]
                    C --> C1[命名规范]
                    C --> C2[版本控制]
                    D --> D1[Swagger]
                    D --> D2[API规范]
                    E --> E1[HTTPS]
                    E --> E2[JWT/OAuth]
            </div>
        </section>

        <!-- Section 1 -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="bg-blue-600 text-white rounded-full w-10 h-10 flex items-center justify-center mr-4">
                    <span class="font-bold">1</span>
                </div>
                <h2 class="text-3xl font-bold">设计良好的 WebService 架构</h2>
            </div>
            <p class="text-lg mb-8">
                在 WebService 设计时，我们应该尽量遵循 <strong class="font-bold text-blue-600">高内聚、低耦合</strong> 的原则，避免服务之间过度依赖，提高可维护性。
            </p>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-project-diagram text-blue-500 mr-3"></i>
                        <span>1.1 选择合适的 WebService 类型</span>
                    </h3>
                    <p class="mb-4">
                        WebService 主要分为两种类型：
                    </p>
                    <ul class="space-y-3 mb-4">
                        <li class="flex items-start">
                            <div class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-server text-xs"></i>
                            </div>
                            <div>
                                <strong>SOAP WebService</strong>（基于 XML，适用于企业级应用）
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="bg-green-100 text-green-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fas fa-globe text-xs"></i>
                            </div>
                            <div>
                                <strong>RESTful WebService</strong>（基于 HTTP，适用于互联网应用）
                            </div>
                        </li>
                    </ul>
                    <div class="bg-blue-50 p-4 rounded-lg">
                        <p class="text-blue-800">
                            对于 <strong>微服务架构、前后端分离项目</strong>，推荐使用 RESTful WebService，它具有更好的扩展性和性能。而对于 <strong>金融、政府系统</strong>，SOAP WebService 可能是更好的选择，因为它内置了更强的安全性和事务支持。
                        </p>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-layer-group text-purple-500 mr-3"></i>
                        <span>1.2 采用分层架构</span>
                    </h3>
                    <p class="mb-4">
                        按照 <strong class="text-purple-600">MVC（Controller-Service-Repository）</strong> 的架构模式拆分 WebService，避免直接在 Controller 层写业务逻辑，提高代码的可维护性。
                    </p>
                    
                    <div class="code-block mb-4">
                        <pre class="text-gray-200"><code>@RestController
@RequestMapping("/users")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping("/{id}")
    public ResponseEntity&lt;UserDTO&gt; getUser(@PathVariable Long id) {
        return ResponseEntity.ok(userService.getUserById(id));
    }
}</code></pre>
                    </div>
                    
                    <div class="flex items-center text-sm text-gray-500">
                        <i class="fas fa-info-circle mr-2"></i>
                        <span>这种分层设计让 WebService 更易扩展，同时降低代码耦合度。</span>
                    </div>
                </div>
            </div>
            
            <div class="mermaid mb-8">
                graph LR
                    A[客户端] --> B[Controller]
                    B --> C[Service]
                    C --> D[Repository]
                    D --> E[数据库]
                    style A fill:#e3f2fd,stroke:#2196f3
                    style B fill:#bbdefb,stroke:#1e88e5
                    style C fill:#90caf9,stroke:#1976d2
                    style D fill:#64b5f6,stroke:#1565c0
                    style E fill:#42a5f5,stroke:#0d47a1
            </div>
        </section>

        <!-- Section 2 -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="bg-green-600 text-white rounded-full w-10 h-10 flex items-center justify-center mr-4">
                    <span class="font-bold">2</span>
                </div>
                <h2 class="text-3xl font-bold">代码组织与命名规范</h2>
            </div>
            <p class="text-lg mb-8">
                良好的代码组织可以让 WebService <strong class="font-bold text-green-600">清晰易懂，降低维护成本</strong>，应遵循以下原则：
            </p>
            
            <div class="grid md:grid-cols-3 gap-6 mb-8">
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-code-branch text-green-500 mr-3"></i>
                        <span>2.1 统一 API 版本管理</span>
                    </h3>
                    <p class="mb-4">
                        当 WebService 需要进行升级时，建议使用 <strong>URL 版本控制</strong>：
                    </p>
                    <div class="code-block">
                        <pre class="text-gray-200 text-sm"><code>GET /api/v1/users/123
GET /api/v2/users/123</code></pre>
                    </div>
                    <p class="mt-4 text-sm text-gray-600">
                        这样可以在不影响老版本 API 的情况下，逐步迁移到新的 API 版本。
                    </p>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-tags text-orange-500 mr-3"></i>
                        <span>2.2 规范 API 命名</span>
                    </h3>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded mr-2">GET</span>
                            <span>/users/{id} —— 获取用户</span>
                        </li>
                        <li class="flex items-start">
                            <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded mr-2">POST</span>
                            <span>/users —— 创建用户</span>
                        </li>
                        <li class="flex items-start">
                            <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-1 rounded mr-2">PUT</span>
                            <span>/users/{id} —— 更新用户</span>
                        </li>
                        <li class="flex items-start">
                            <span class="bg-red-100 text-red-600 text-xs px-2 py-1 rounded mr-2">DELETE</span>
                            <span>/users/{id} —— 删除用户</span>
                        </li>
                    </ul>
                    <p class="mt-4 text-sm text-gray-600">
                        不要使用动词，如 <code class="bg-gray-100 px-1 rounded">/getUser</code>，应该使用资源名 <code class="bg-gray-100 px-1 rounded">/users</code>，符合 RESTful 设计规范。
                    </p>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-code text-purple-500 mr-3"></i>
                        <span>2.3 代码风格一致</span>
                    </h3>
                    <p class="mb-4">
                        团队应使用以下工具保证代码风格一致：
                    </p>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">Checkstyle</span>
                        <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">SonarQube</span>
                        <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">PMD</span>
                        <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">FindBugs</span>
                    </div>
                    <div class="flex items-center text-sm text-gray-500">
                        <i class="fas fa-lightbulb mr-2"></i>
                        <span>可以在CI/CD流水线中加入代码检查步骤</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 3 -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="bg-purple-600 text-white rounded-full w-10 h-10 flex items-center justify-center mr-4">
                    <span class="font-bold">3</span>
                </div>
                <h2 class="text-3xl font-bold">详细的 API 文档管理</h2>
            </div>
            <div class="highlight-box p-6 mb-8 rounded-lg">
                <p class="text-lg leading-relaxed">
                    <strong class="font-bold">API 文档是 WebService 维护的关键</strong>，可以使用 <strong class="font-bold">Swagger</strong> 生成在线文档，提高团队协作效率。
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-book-open text-purple-500 mr-3"></i>
                        <span>3.1 使用 Swagger 生成 API 文档</span>
                    </h3>
                    <p class="mb-4">
                        在 Spring Boot 项目中，引入 <strong>Springdoc OpenAPI</strong>：
                    </p>
                    <div class="code-block mb-4">
                        <pre class="text-gray-200"><code>&lt;dependency&gt;
    &lt;groupId&gt;org.springdoc&lt;/groupId&gt;
    &lt;artifactId&gt;springdoc-openapi-starter-webmvc-ui&lt;/artifactId&gt;
    &lt;version&gt;2.0.2&lt;/version&gt;
&lt;/dependency&gt;</code></pre>
                    </div>
                    <p class="mb-4">
                        然后在 Controller 层添加注解：
                    </p>
                    <div class="code-block">
                        <pre class="text-gray-200"><code>@Tag(name = "用户管理", description = "提供用户相关的 API")
@RestController
@RequestMapping("/users")
public class UserController {
    
    @Operation(summary = "获取用户信息", description = "通过用户 ID 获取用户详情")
    @GetMapping("/{id}")
    public ResponseEntity&lt;UserDTO&gt; getUser(@PathVariable Long id) {
        return ResponseEntity.ok(userService.getUserById(id));
    }
}</code></pre>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="bg-gray-800 rounded-lg overflow-hidden">
                        <img src="https://miro.medium.com/max/1400/1*8tyZJ9jvD6-Jxq1Qez8mHQ.png" alt="Swagger UI示例" class="w-full h-auto">
                    </div>
                    <div class="mt-4 text-center">
                        <p>访问 <code class="bg-gray-100 px-2 py-1 rounded">http://localhost:8080/swagger-ui.html</code> 即可查看在线文档。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 4 -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="bg-red-600 text-white rounded-full w-10 h-10 flex items-center justify-center mr-4">
                    <span class="font-bold">4</span>
                </div>
                <h2 class="text-3xl font-bold">统一异常处理</h2>
            </div>
            <p class="text-lg mb-8">
                如果不进行 <strong class="font-bold text-red-600">统一异常处理</strong>，WebService 在出现错误时可能会返回堆栈信息，影响安全性和可读性。
            </p>
            
            <div class="bg-white p-6 rounded-xl shadow-md mb-8">
                <h3 class="text-xl font-semibold mb-4 flex items-center">
                    <i class="fas fa-bug text-red-500 mr-3"></i>
                    <span>4.1 使用 @ControllerAdvice 统一异常处理</span>
                </h3>
                <div class="code-block mb-4">
                    <pre class="text-gray-200"><code>@RestControllerAdvice
public class GlobalExceptionHandler {

    @ExceptionHandler(NotFoundException.class)
    public ResponseEntity&lt;String&gt; handleNotFoundException(NotFoundException ex) {
        return ResponseEntity.status(HttpStatus.NOT_FOUND).body(ex.getMessage());
    }

    @ExceptionHandler(Exception.class)
    public ResponseEntity&lt;String&gt; handleGeneralException(Exception ex) {
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("服务器内部错误");
    }
}</code></pre>
                </div>
                <p class="mb-4">
                    这样，当请求的用户 ID 不存在时，返回的 JSON 信息更加友好：
                </p>
                <div class="code-block">
                    <pre class="text-gray-200"><code>{
  "error": "用户不存在"
}</code></pre>
                </div>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-check-circle text-green-500 mr-3"></i>
                        <span>优点</span>
                    </h3>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-400 mt-1 mr-2"></i>
                            <span>统一的错误格式</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-400 mt-1 mr-2"></i>
                            <span>避免暴露敏感信息</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-400 mt-1 mr-2"></i>
                            <span>便于前端错误处理</span>
                        </li>
                    </ul>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-exclamation-triangle text-orange-500 mr-3"></i>
                        <span>常见错误</span>
                    </h3>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-times text-red-400 mt-1 mr-2"></i>
                            <span>直接返回异常堆栈</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times text-red-400 mt-1 mr-2"></i>
                            <span>错误信息不明确</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times text-red-400 mt-1 mr-2"></i>
                            <span>HTTP状态码使用不当</span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- Section 5 -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="bg-yellow-600 text-white rounded-full w-10 h-10 flex items-center justify-center mr-4">
                    <span class="font-bold">5</span>
                </div>
                <h2 class="text-3xl font-bold">安全性优化</h2>
            </div>
            <div class="highlight-box p-6 mb-8 rounded-lg">
                <p class="text-lg leading-relaxed">
                    <strong class="font-bold">安全性是 WebService 维护的重要组成部分</strong>，应考虑以下措施：
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mb-8">
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-lock text-yellow-500 mr-3"></i>
                        <span>5.1 启用 HTTPS</span>
                    </h3>
                    <p class="mb-4">
                        所有 WebService 访问应强制使用 <strong>HTTPS</strong>，防止数据被中间人攻击。
                    </p>
                    <div class="flex items-center text-sm text-gray-500">
                        <i class="fas fa-info-circle mr-2"></i>
                        <span>可以使用Let's Encrypt获取免费SSL证书</span>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-user-shield text-blue-500 mr-3"></i>
                        <span>5.2 认证与授权</span>
                    </h3>
                    <ul class="space-y-2 mb-4">
                        <li class="flex items-start">
                            <i class="fas fa-key text-blue-400 mt-1 mr-2"></i>
                            <span><strong>基于 JWT（JSON Web Token）</strong> 进行用户身份验证</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-user-lock text-blue-400 mt-1 mr-2"></i>
                            <span><strong>OAuth2.0</strong> 适用于开放 API 认证</span>
                        </li>
                    </ul>
                    <div class="code-block">
                        <pre class="text-gray-200 text-sm"><code>public class JwtFilter extends OncePerRequestFilter {
    @Override
    protected void doFilterInternal(HttpServletRequest request, 
            HttpServletResponse response, FilterChain chain)
            throws ServletException, IOException {
        String token = request.getHeader("Authorization");
        if (token != null && JwtUtil.validateToken(token)) {
            // 解析 token 并设置用户身份
        }
        chain.doFilter(request, response);
    }
}</code></pre>
                    </div>
                </div>
            </div>
            
            <div class="mermaid">
                graph TB
                    subgraph 安全措施
                        A[HTTPS] --> B[传输加密]
                        C[认证] --> D[JWT]
                        C --> E[OAuth2.0]
                        F[授权] --> G[角色权限]
                        F --> H[访问控制]
                    end
                    style A fill:#fff3e0,stroke:#ffa000
                    style C fill:#e3f2fd,stroke:#2196f3
                    style F fill:#e8f5e9,stroke:#4caf50
            </div>
        </section>

        <!-- Section 6 -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="bg-indigo-600 text-white rounded-full w-10 h-10 flex items-center justify-center mr-4">
                    <span class="font-bold">6</span>
                </div>
                <h2 class="text-3xl font-bold">自动化测试</h2>
            </div>
            
            <div class="bg-white p-6 rounded-xl shadow-md mb-8">
                <h3 class="text-xl font-semibold mb-4 flex items-center">
                    <i class="fas fa-vial text-indigo-500 mr-3"></i>
                    <span>6.1 使用 JUnit + MockMvc 进行单元测试</span>
                </h3>
                <div class="code-block mb-4">
                    <pre class="text-gray-200"><code>@SpringBootTest
@AutoConfigureMockMvc
public class UserControllerTest {

    @Autowired
    private MockMvc mockMvc;

    @Test
    public void testGetUser() throws Exception {
        mockMvc.perform(get("/users/1"))
               .andExpect(status().isOk())
               .andExpect(jsonPath("$.name").value("Alice"));
    }
}</code></pre>
                </div>
                <p class="mb-4">
                    这样可以确保 API 的正确性，防止代码变更后引发 Bug。
                </p>
                <div class="flex flex-wrap gap-2">
                    <span class="bg-indigo-100 text-indigo-600 px-3 py-1 rounded-full text-sm">JUnit</span>
                    <span class="bg-indigo-100 text-indigo-600 px-3 py-1 rounded-full text-sm">MockMvc</span>
                    <span class="bg-indigo-100 text-indigo-600 px-3 py-1 rounded-full text-sm">TestNG</span>
                    <span class="bg-indigo-100 text-indigo-600 px-3 py-1 rounded-full text-sm">RestAssured</span>
                </div>
            </div>
            
            <div class="grid md:grid-cols-3 gap-6">
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-lg font-semibold mb-3 flex items-center">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        <span>单元测试</span>
                    </h3>
                    <p class="text-sm text-gray-600">
                        测试单个方法或类的功能
                    </p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-lg font-semibold mb-3 flex items-center">
                        <i class="fas fa-project-diagram text-blue-500 mr-2"></i>
                        <span>集成测试</span>
                    </h3>
                    <p class="text-sm text-gray-600">
                        测试多个组件的交互
                    </p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-lg font-semibold mb-3 flex items-center">
                        <i class="fas fa-globe text-purple-500 mr-2"></i>
                        <span>端到端测试</span>
                    </h3>
                    <p class="text-sm text-gray-600">
                        测试整个系统流程
                    </p>
                </div>
            </div>
        </section>

        <!-- Summary -->
        <section class="bg-white p-8 rounded-xl shadow-md mb-20">
            <h2 class="text-3xl font-bold mb-6 text-center">WebService 最佳实践总结</h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="text-center p-4">
                    <div class="bg-blue-100 text-blue-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-sitemap text-2xl"></i>
                    </div>
                    <h3 class="font-semibold mb-2">合理架构</h3>
                    <p class="text-sm text-gray-600">分层设计，职责分离</p>
                </div>
                <div class="text-center p-4">
                    <div class="bg-green-100 text-green-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-file-alt text-2xl"></i>
                    </div>
                    <h3 class="font-semibold mb-2">规范文档</h3>
                    <p class="text-sm text-gray-600">Swagger自动生成</p>
                </div>
                <div class="text-center p-4">
                    <div class="bg-yellow-100 text-yellow-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-shield-alt text-2xl"></i>
                    </div>
                    <h3 class="font-semibold mb-2">安全防护</h3>
                    <p class="text-sm text-gray-600">HTTPS + JWT</p>
                </div>
                <div class="text-center p-4">
                    <div class="bg-purple-100 text-purple-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-vial text-2xl"></i>
                    </div>
                    <h3 class="font-semibold mb-2">全面测试</h3>
                    <p class="text-sm text-gray-600">单元/集成/端到端</p>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-12">
        <div class="container mx-auto px-4 text-center">
            <div class="mb-6">
                <h3 class="text-xl font-semibold text-white mb-2">技术小馆</h3>
                <p>专业的开发者知识分享平台</p>
            </div>
            <div>
                <a href="http://www.yuque.com/jtostring" class="text-blue-400 hover:text-blue-300 transition duration-300">
                    <i class="fas fa-external-link-alt mr-2"></i> http://www.yuque.com/jtostring
                </a>
            </div>
            <div class="mt-8 pt-6 border-t border-gray-800 text-sm text-gray-500">
                &copy; 2023 技术小馆. 保留所有权利.
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```